<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .title{
            width: 100px;
            height: 100px;
            background-color: bisque;
        }
    </style>
</head>
<body>
    <!-- 二、React2种创建方式 -->
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <div id="dome"></div>
    <!-- 1引入核心 -->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!-- 2扩展库-->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!-- 3引入babel，用于将jsx转为js-->
    <script type="text/javascript" src="./js/babel.min.js"></script>

    <!-- 创建方法1 写虚拟dom快捷-->
    <!-- <script type="text/babel">/*此处一定要写babal*/
        // 1.创建虚拟DOM
        const VDOM = (
            <h1 id = 'title'>
                <span>创建方法1 写虚拟dom快捷</span>
            </h1>
        )/*此处一定不能写引号，因为不是字符串*/

        // 2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'));//把哪个虚拟DOM，渲染到容器里面去

        const TDOM = document.getElementById('dome');
        console.log('虚拟dom',VDOM);
        console.log('真实dom',TDOM);

         三、真实dom和虚拟dom
        // debugger--查看虚拟DOM和真实DOM

    </script> -->

    <!-- 创建方法2 写虚拟dom不方便(开发不用)-->
    <!-- <script type="text/javascript">/*此处一定要写babal*/
        // 1.创建虚拟DOM
        const VDOM = React.createElement('h1',{title:'我是title'},React.createElement('span',{},'创建方法2 写虚拟dom不方便'))

        // 2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'));//把哪个虚拟DOM，渲染到容器里面去

    </script> -->




    <!-- 四、javascript XML的语法规范 -->
    <!-- <script type="text/babel">
        const myId = 'Title'
        const myData = 'JSX的语法规范a'

        const VDOMA = (
           <div>
                <h1 className="title" id= {myId.toLocaleLowerCase()}>
                    <span style={{color: 'red',fontSize:'20px'}}>{myData.toLocaleLowerCase()}</span>    
                </h1>
                <h1 className="title" id= {myId.toLocaleLowerCase()}>
                    <span style={{color: 'red',fontSize:'20px'}}>{myData.toLocaleLowerCase()}</span>    
                </h1>
                <input type="text"/>
                <Good>标签的首字母有规范</Good>
            </div>
        )
        //1.定义虚拟DOM时，不要写引号
        //2.标签中混入JS表达式要用{}
        //3.样式的类名指定不要用class,要用className
        //4.内联样式要用 style={{color: 'red',fontSize:'60px'}}的形式去写
        //5.虚拟DOM，必须只有一个根标签
        //6.标签必须闭合比如input<input type="text"/>
        //7.标签首字母 <Good>标签的首字母有规范</Good>
        // a.如果小写字母开头，则将该标签转为html中的同名元素，若html中没有该标签中对应的同名标签，则报错
        // b.如果大写字母开头，react就会去渲染对应的组件，若组件没有定义，则报错
        ReactDOM.render(VDOMA,document.getElementById('dome'));
    </script> -->





    <!-- 五、动态加载数据 -->
    <!-- <script type="text/babel">
        // 模拟一些数据
        const data = ['Angular','React','vue']
        const obj = {name1:'Angular',name2:'React',name3:'vue'}

        const VDOMB = (
            <div>
                <h1>前端js框架列表</h1>
                <ul>
                   {
                      data.map((item,index)=>{
                            return <li key={index}>{item}</li>
                      })
                   }
                </ul>    
            </div>
        )

        //表达式
        // 一定要区分：[js语句（代码）]--和----[js表达式]
        //1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
        //下面这些都是表达式：
        //(1).a
        //(2).a+b
        //(3).demo(1)   const x =(能接到值就是-表达式-不然就不是表达式)
        //(4).arr.map()
        //(5).function test(){}

        // 2.语句(代码)
        //下面这些都是语句（代码）：
        //(1).if(){}
        //(2).for(){}
        //(3).switch(){}
        // 总结：在jsx里面不能直接-写语句，但是可以写-表达式-在表达式的基础上再去写-语句

       
        ReactDOM.render(VDOMB,document.getElementById('test'))
    </script> -->




    <!-- 七、React面向组件编程 -->
    <!-- <script type="text/babel">
        // 1.创建函数式组件
        function MyComponent(){
            console.log('this指向是undefined,因为babel编译后开启了严格模式',this)
            return <h2>我是用函数定义的组件[适用于[简单组件]的定义]</h2>
        }

        // 2.渲染组件到页面
        ReactDOM.render(<MyComponent/>,document.getElementById('test'))


        //执行了ReactDOM.render(<MyComponent/>...)发生了什么
        //1.React解析组件标签，找到MyComponent组件
        //2.发现组件是使用函数定义的，随后调用该函数，将返回的函数DOM转为真实的DOM，随后呈现在页面中


        //2.类式组件
        class MyComponentA  extends React.Component{
            render(){
                // render是放在哪里？--MyComponentA原型对象上的
                //render中的this是谁？--MyComponentA实例对象--组件实例对象
                console.log('render中的this是谁',this)
                return <h2>我是用类定义的组件[适用于[复杂组件]的定义]</h2>
            }
        }

        ReactDOM.render(<MyComponentA/>,document.getElementById("dome"))

        //执行了ReactDOM.render(<MyComponentA/>...)发生了什么
        //1.React解析组件标签，找到MyComponent组件
        //2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法 
        //3.将render返回的虚拟DOM转为真实的DOM,随后呈现在页面中

    </script> -->



    <!-- 八、组件实例的三大核心属性之一state -->
    <!-- <script type="text/babel">
        //1.创建组件
        class Myclick extends React.Component{
            //构造器调用了几次？----1次
            constructor(props){
                console.log('constructor')
                super(props)
                this.state = {isHot:true}//借助构造器初始化状态

                //解决this指向
                this.deno = this.DClcik.bind(this)//this.DClcik.bind(this)函数的this,就会变成Myclick的实例对象
                //this.DClcik---把函数放到了实例自身，还给函数起了一个名字
              
            }
            render(){//调用了几次？------1+n次  1是初始化那次 n是状态更新的次数
                console.log('render')
                const {isHot} = this.state
                return <h1 onClick={this.deno}>今天天气很{ isHot? '炎热' : '凉快'}</h1>//读写出状态
            }
            DClcik(){//调用几次？-----点几次调用几次
                console.log('DClcik')
                //DClcik放在哪里？----Myclick的原型对象上，供实例使用
                //由于DClcik是作为onClick的回调，所以不是通过实例调用的，是直接调用
                //类中的方法默认开启了局部严格模式，所以DClcik中的this,为undefined
                
                const isHot = this.state.isHot
                // this.stat e.isHot = !isHot //React不认可，不能直接更改
                //状态不可以直接更改，要借助一个内置的APi去更改

                this.setState({isHot:!isHot})

                //严重注意！！状态必须通过setState去进行更新，并且更新是合并不是替换

           

             }
        }
        //2渲染组件
        ReactDOM.render(<Myclick/>,document.getElementById('test'));
        // const btn1 = document.getElementById('title')
        // btn1.addEventListener('click',function(){
        //     alert('按钮1')
        // })

        // const btn1 = document.getElementById('title')
        // btn1.onclick = ()=>{
        //     alert('按钮1')
        // }
       
    //总结：如果想实现一个动态点击
    //1.创建组件,写入render事件
    //2.渲染组件
    //3.在组件里面写入构造器和点击事件-注意事件的写法onClick={this.deno}>
    //4.事件写入后，存在一个this指向问题，要解决这个，事件才可以成功调用
    //5.关于状态，React必须要通过setState()去改变，不然，状态不会发生变化
    </script> -->






    <!-- 实现 -->
    <!-- <script type="text/babel">
        //1.创建组件-通过类的继承去创建组件
        class Module extends React.Component{
            constructor(props){
                super(props)
                this.state = {ishot:false,weifeng:true}
                this.ChangClick = this.Funclick.bind(this)
            }
            render(){
                const {ishot} = this.state;
                return <h1 onClick={this.ChangClick}>今天天气很{ishot? '凉爽' : '炎热'}</h1>
            }
            Funclick(){
                const {ishot} = this.state
                // this.state.ishot = !ishot
                this.setState({ishot:!ishot})
            }
        }
        //2.渲染组件
        ReactDOM.render(<Module/>,document.getElementById('test'))
    </script> -->




      <!-- 简写形式 -->
      <script type="text/babel">
        //1.创建组件-通过类的继承去创建组件
        class Module extends React.Component{
            //1.构造器可以不要了
            // constructor(props){
            //     super(props)
            //     // this.state = {ishot:false,weifeng:true}
            //     // this.ChangClick = this.Funclick.bind(this)
            // }

            //2.初始化状态
            state = {ishot:false,weifeng:true}

            render(){
                const {ishot} = this.state;
                return <h1 onClick={this.ChangClick}>今天天气很{ishot? '凉爽' : '炎热'}</h1>
            }

            //3.通过箭头函数，箭头函数没有自己的this，它会找外面的this，从而获取到正确的this指向

            ChangClick = () =>{
                const {ishot} = this.state
                this.setState({ishot:!ishot})
            }
        }
        //2.渲染组件
        ReactDOM.render(<Module/>,document.getElementById('test'))
    </script>





</body>
</html>